<template>
    <div class="filter">
        <el-row v-for="item in typeList" :key="item.id">
            <el-col :span="4">{{ item.name}}</el-col>
            <el-col :span="20">
                <ul class="filter-lis">
                    <li v-for="(rs, index) in item.ch" :key="index" @click="handleClick(item.field, rs.id)"
                        :class="{active: rs.id === params[item.field]}">
                        {{ rs.title }}
                    </li>
                </ul>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="4">价格</el-col>
            <el-col :span="20">
                <div class="p-sm flex">
                    <el-input type="number" placeholder="最小价格" v-model="price1" style="width: 150px"></el-input>

                    <span style="text-align: center;padding:10px;">-</span>

                    <el-input type="number" placeholder="最大价格" v-model="price2" style="width: 150px"></el-input>
                    <el-button type="danger" class="ml-10" :disabled="!canSubmit"
                        @click="handleConfirmPrice">确定价格</el-button>
                </div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="4">行政地区</el-col>
            <el-col :span="20">
                <div class="p-sm">
                    <el-select v-model="ruleForm.province" placeholder="请选择省">
                        <el-option v-for="item in regionData" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select v-model="ruleForm.city" placeholder="请选择市">
                        <el-option v-for="item in cityData" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select v-model="ruleForm.area" placeholder="请选择区">
                        <el-option v-for="item in areaData" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    <el-button type="danger" class="ml-10" :disabled="!canSubmit1"
                        @click="handleConfirmArea">确定地区</el-button>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: "filters",
    components: {},
    props: {
        regionData: {
            type: Array,
            default: () => []
        },
        typeList: {
            type: Array,
            default: () => []
        },
        params: {
            type: Object,
            default: () => {}
        }
    },
    data () {
        return {
            provinceData: [],
            //cityData: [],
            //areaData: [],
            price1: '',
            price2: '',
            ruleForm: {
                price: '',
                province: '',
                city: '',
                area: '',
            },
            value: ''
        }
    },
    computed: {
        // 通过 this.ruleForm.province 计算出市数据
        cityData(){
            if (!this.ruleForm.province) return [];
            const province = this.regionData.find(p => p.value === this.ruleForm.province)
            return province ? province.children : [];
        },
        // 通过 this.ruleForm.city 计算出区数据
        areaData(){
            if (!this.ruleForm.province) return []
            const city = this.regionData
                .find(p => p.value === this.ruleForm.province)
                .children.find(c => c.value === this.ruleForm.city)
            return city ? city.children : [];
        },
        canSubmit () {
            // 确保 price1 和 price2 都不是空字符串，并且 price2 大于 price1
            return this.price1.trim() !== '' && this.price2.trim() !== '' && parseFloat(this.price1) < parseFloat(this.price2);
        },
        canSubmit1 () {
            return this.ruleForm.province !== '' || this.ruleForm.city !== '' || this.ruleForm.area !== '';
        }
    },
    mounted () {
        //this.provinceData = this.regionData;
    },
    methods: {
        handleClick(field, value){
            this.$emit('on-filter', {field, value})
        },
        handleConfirmPrice(){
            this.ruleForm.price = `${this.price1}-${this.price2}`;
            this.$emit('on-filter', { field: 'price', value: this.ruleForm.price })
        },
        handleConfirmArea (){
            if (this.ruleForm.province !== '') {
                this.$emit('on-filter', { field: 'province', value: this.ruleForm.province })
            }
            if (this.ruleForm.city !== '') {
                this.$emit('on-filter', { field: 'city', value: this.ruleForm.city })
            }
            if (this.ruleForm.area !== '') {
                this.$emit('on-filter', { field: 'area', value: this.ruleForm.area })
            }
        }
    }
}
</script>

<style lang="less" scoped>
.filter {
    font-size: 14px;
    border: 1px solid rgba(112, 112, 112, 0.10);
    background-color: #fff;

    .el-row:not(:last-child) {
        border-bottom: 1px solid rgba(46, 48, 51, .1)
    }

    .el-col-4 {
        height: 50px;
        line-height: 50px;
        text-align: center;
        background: rgba(217, 217, 217, 0.10);
    }

    .el-select+.el-select {
        margin-left: 15px;
    }

    .filter-lis {
        li {
            list-style: none;
            display: inline-block;
            padding: 15px;
            cursor: pointer;

            &:hover,
            &.active {
                color: #EF312A;
            }
        }
    }
}
</style>